<template>
	<section>
		<div class="home">
			<div class="banner">
				<div class="video">
					<video autoplay="autoplay" loop="loop" ref="videoBannerRef" class="w100" src="@/assets/video/banner.mp4" >
					</video>
<!-- 					<video autoplay="autoplay" loop="loop" ref="videoBannerRef" class="w100" src="http://e.huawei.com/topic/leading-new-ict-cn/video/6sec.mp4" >
					</video> -->

				</div>
				<div class="video-desc">
					<div class="title">
						<h1>
						专注<span>立体</span>计算视觉<span>15年</span>&nbsp;&nbsp;专利布局全球超<span>1000项</span>&nbsp;&nbsp;
						</h1>
						<!-- 						<div class="btns">
							<b-button size="lg" class="btn-video" @click="showModal">观看视频</b-button>
							<b-button size="lg">了解更多</b-button>
						</div> -->
						<div class="video-button" @click="showModal">
							<img src="@/assets/image/video1_button.png" />
							<img src="@/assets/image/video1_button_on.png" />
						</div>
					</div>
				</div>
				<div>
					<b-modal ref="videoModalRef" hide-footer hide-header size="lg" @hide="hideModal">
						<video ref="videoRef" controls="controls" class="w100" src="@/assets/video/banner.mp4">
						</video>
					</b-modal>
				</div>
			</div>
			<!-- 			<div class="content">
				<div class="title">
					<span>产品与服务</span>
				</div>
				<div class="items">
					<div class="item">
						<div class="solution">
							<img src="@/assets/image/solution_img1.jpg" class="w100">
							<div class="desc">
								<p>智能探伤</p>
								<p>人工智能计算机引擎</p>
								<p>融合计算、存储、网络、虚拟化、管理于一体，私有云最佳基础设施平台</p>
								<router-link class="link" to="/scene/zhinengtanshang">了解详情</router-link>
							</div>
						</div>
					</div>
					<div class="item">
						<div class="solution">
							<img src="@/assets/image/solution_img2.jpg" class="w100">
							<div class="desc">
								<p>未来眼镜</p>
								<p>FusionCube超融合基础设施</p>
								<p>融合计算、存储、网络、虚拟化、管理于一体，私有云最佳基础设施平台</p>
								<router-link class="link" to="/scene/weilaiyanjing">了解详情</router-link>
							</div>
						</div>
					</div>
					<div class="item">
						<div class="solution">
							<img src="@/assets/image/solution_img3.jpg" class="w100">
							<div class="desc">
								<p>复眼视界</p>
								<p>X-Gen Wi-Fi</p>
								<p>华为发布X-Gen Wi-Fi，定义敏捷园区新时代</p>
								<router-link class="link" to="/scene/fuyanshijie">了解详情</router-link>
							</div>
						</div>
					</div>
				</div>
			</div> -->
		</div>
	</section>
</template>
<script>
export default {
	data() {
		return {
	
		}
	},
	methods: {
		showModal() {
			this.$refs.videoModalRef.show();
			this.$refs.videoRef.play();
		},
		hideModal() {
			this.$refs.videoRef.pause();
		},
	},

}

</script>
<style scoped lang="scss">
.home {
	position: relative;

	.banner {
		.video {
			min-height: 500px;
			min-width:100%;
			width: 100%;
			margin: auto 0;  
			z-index: -1;
		}

		.full-video {
			min-width: 100%;
		}

		.video-desc {
			position: absolute;
			top: 0;
			width: 100%;
			height: 100%;
			z-index: 1;
			background: rgba(0, 0, 0, .5);

			.title {

				font-size: 36px;
				color: #fff;
				height: 300px;
				padding: 23% 5% 0 5%;
				text-align: center;
				width: 100%;

				h1 {
					font-size: 32px;
					span {
						color: #B716DA;
					}
				}
			}
			/**
			.btns button {
				color: #fff;
				border: 2px solid #e50000;
				background: #e50000;
				font-size: 16px;
				border-radius: 0;
			}

			.btns:before {
				font-family: 'iconfont' !important;
				font-size: 26px;
				font-style: normal;
				position: absolute;
				top: 5px;
				left: 26px;
				content: '\e6d2';
				-webkit-font-smoothing: antialiased;
				-moz-osx-font-smoothing: grayscale;
				font-size: 30px;
				top: 9px;
				left: 26px;
			}
			**/
			.video-button {
				margin-top: 50px;
				img {
					display: inline-block;
					text-align: center;
					width: 155px;
				}
			}


			.video-button img:last-child {
				display: none;
			}
			.video-button:hover {
				cursor: pointer;
			}
			.video-button:hover img:last-child {
				display: inline-block;
			}
			.video-button:hover img:first-child {
				display: none;
			}
		}
	}
	.content {
		//position: relative;
		text-align: center;
		padding: 40px 0;
		margin-bottom: 56px;

		.title {
			font-size: 30px;
		}

		.items {
			margin: 15px 10%;

			.item {
				float: left;
				width: 33.333%;

				.solution {
					position: relative;
					margin: 0 10px;
					height: 100%;
					overflow: hidden;

					img {
						transition: all 0.6s;
					}
					img:hover {
						transform: scale(1.1);
					}
					.desc {
						color: #fff;
						position: absolute;
						bottom: 0;
						text-align: center;
						width: 100%;
						background: rgba(0, 0, 0, .3);
						height: 45%;
						padding: 0 5px;

						p:first-child {
							font-size: 28px
						}

						p {
							font-size: 18px;
						}

						ul {
							list-style-type: none;
							width: 100%;
							display: inline-block;
							margin: 0 auto;

							li {
								box-sizing: border-box;
								float: left;
								width: 50%;
								padding: 2% 0 3% 0%;
								text-align: left;
								white-space: nowrap;
							}
						}

						.link {
							vertical-align: middle;
							display: inline-block;
							width: 26%;
							height: 30px;
							text-align: center;
							line-height: 30px;
							background: #009bee;
							margin-top: 3%;
							opacity: .9;
							color: #fff;
							text-decoration: none;
						}
					}
				}
			}
		}
	}
}

</style>
